import React from "react";
// useSelector用于获取redux中的数据
// useDispatch用于触发redux中的action
import { useSelector, useDispatch } from "react-redux";
import {
  increment,
  decrement,
  incrementByAmount,
  incrementAsync,
} from "./store/counterSlice";

import Child from "./Child";

const App = () => {
  const value = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <>
      <h2>redux-toolkit</h2>
      <button onClick={() => dispatch(decrement())}>-</button>
      <span>{value}</span>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(incrementByAmount(2))}>+2</button>
      <button onClick={() => dispatch(incrementAsync(3))}>async ++</button>

      <hr />

      <Child />
    </>
  );
};

export default App;
